<template>
  <f7-page class="detail">
    <f7-navbar>
      <f7-nav-left>
        <f7-link back icon-material="arrow_back" force></f7-link>
      </f7-nav-left>
      <f7-nav-title>移动机械详情</f7-nav-title>
      <f7-nav-right></f7-nav-right>
    </f7-navbar>
    <div class="content-box">
      <img
        :src="require(`../../../../../assets/img/qzjx/mobile/${models.model.equipmentType ? models.model.equipmentType.toUpperCase() : 'QT'}.png`)"
        alt="" class="left-box">
      <div class="right-box">
        <div class="title-box">
          <section>
            <h3>{{ models.model.recordCode || '--' }}</h3>
          </section>
        </div>
        <p>设备类型：<span>{{ models.model.equipmentType | DictItem(controlData.mobileEquipmentType) }}</span></p>
        <p>进场时间：
          <span v-if="models.model.enterTime && models.model.exitTime">{{ models.model.enterTime | date('yyyy-MM-dd') }}
            ~ {{ models.model.exitTime | date('yyyy-MM-dd') }}</span>
          <span v-else-if="models.model.enterTime">{{ models.model.enterTime | date('yyyy-MM-dd') }} ~ 至今</span>
          <span v-else>--</span>
        </p>
        <p>{{ models.model.engineeName || '--' }}</p>
      </div>
    </div>
    <div class="qzjx-card">
      <van-steps direction="vertical" :active="activeStep">
        <van-step v-for="item in nodeList" :key="item.caseId" @click.native="goDetail(item)">
          <template v-slot:inactive-icon>
            <van-icon name="success" class="is-success" v-if="item.status == 2" />
            <div class="is-waiting" v-if="item.status == 0"></div>
            <div class="is-process" v-if="item.status == 1"></div>
          </template>
          <template v-slot:active-icon>
            <van-icon name="success" class="is-success" v-if="item.status == 2" />
            <div class="is-waiting" v-if="item.status == 0"></div>
            <div class="is-process" v-if="item.status == 1"></div>
          </template>
          <div class="step-box">
            <span>{{ item.nodeName }} <span class="tag tag-fill" v-if="item.desc">{{ item.desc }}</span></span>
            <span v-if="item.status == 1 || (item.status == 2 && item.rightDesc != '待填写')" :class="item.status == 2 && item.type == 'exit'?'mr5':''">{{ item.rightDesc }}<van-icon name="arrow" v-if="!(item.status == 2 && item.type == 'exit')"/></span>
          </div>
        </van-step>
      </van-steps>
    </div>
  </f7-page>
</template>

<script>
import Controller from "@/libs/framework/controller";
export default class sInsp extends Controller {
  onBeforeInit() {
    this.urls = {
      model: ["/app/equipment/eqmMobileRegister/getEntity", "/app/equipment/eqmMobileRegister/getWholeStatus"]
    };
  }
  onBeforeQuery(type, conditions, params) {
    this.vm.$f7.preloader.show();
  }
  onAfterQuery(type, isSuccess, result) {
    if (!isSuccess) {
      setTimeout(() => {
        this.vm.$f7.preloader.hide();
        this.vm.$f7.dialog.alert('数据加载失败，请刷新页面重试')
      }, 3000);
    }
    if (type == 'form$1') {
      this.$data.nodeList = result.parameters.data || []
    }
    this.vm.$f7.preloader.hide();
    this.vm.getStep()
    return result;
  }

  mixin() {
    return {
      props: {},
      data() {
        return {
          models: {
            model: {}
          },
          nodeList: [],
          notifyInfo: {
            property: {},
            engineeBaseInfo: {},
            installOrg: {}
          },
          installNoteList: [],
          activeStep: 0,
          installNotify: {},
          notifyId: '',
        };
      },
      computed: {
        isConOrg() {//施工单位
          return Number(window.localStorage.getItem('mobileEquip-isConOrg'))
        },
        isSupOrg() {// 监理
          return Number(window.localStorage.getItem('mobileEquip-isSupOrg'))
        },
        isSupervisor() {//监督员
          return Number(window.localStorage.getItem('mobileEquip-isSupervisor'))
        }
      },
      methods: {
        // 详情
        goDetail(item) {
          if (item.status == 0 || (item.status == 2 && item.rightDesc == '待填写')) {// 未开始  或已完成未填写 点击不可操作
            return;
          }
          if (item.type == 'register') {// 进场验收
            this.handleEntry();
          } else if (item.type == 'job') {// 作业前准备
            this.handleBeforeWork(item)
          } else if (item.type == 'patrol') {// 巡检
            this.handlePatrol(item);
          } else if (item.type == 'maintenancen') {// 维保
            this.handleMaintenancen(item);
          } else if (item.type == 'exit') {// 退场
            if (item.status == 1) {
              if (this.isConOrg) {
                this.handleExit(item);
              } else {
                this.$toast("您当前无法使用该功能，请联系施工单位进行退场操作")
              }
            }
          }
        },
        // 进场
        handleEntry() {
          this.$f7.preloader.show();
          let url = "/business/qzjx/mobileEquipment/equip/entryCheck";
          this.$framework.util
            .getPromise(`/workflow/getWorkflowArgs`, { formId: this.models.model.registerId })
            .then(res => {
              if (!res.pageAction || !res.assigneeId) {
                this.$f7.preloader.hide();
                return;
              }
              const params = {
                pageAction: res.pageAction,
                caseId: this.models.model.registerId,
                assigneeId: res.assigneeId,
                registerId: this.models.model.registerId,
                action: res.pageAction == 'edit' ? 'processEdit' : 'processView',
                formId: this.models.model.registerId,// 用于获取流程数据
                engineeId: this.models.model.engineeId
              };

              if (res.pageAction === 'view') {
                Object.assign(params, { historyTaskId: res.historyTaskId })
              } else {
                Object.assign(params, { taskId: res.taskId })
              }
              let paramStr = [];
              for (let key in params) {
                paramStr.push(`${key}=${params[key]}`);
              }
              paramStr = paramStr.join("&");
              this.$f7.view.current.router.navigate(url + `?${paramStr}`);
            })
            .catch(err => {
              this.$f7.preloader.hide();
            })
            .finally(() => { });
        },
        // 作业前准备
        handleBeforeWork(item) {
          if (item.rightDesc == '待填写') {
            if (this.isConOrg) {
              const params = [`registerId=${this.models.model.registerId}`, `engineeId=${this.models.model.engineeId}`, `engineeCode=${this.models.model.engineeCode}`]
              this.$f7.view.current.router.navigate(`/business/qzjx/mobileEquipment/equip/beforeWork/create?${params.join('&')}`);
            } else {
              this.$toast("您当前无法使用该功能，请联系施工单位操作")
            }
          } else {
            const params = [`registerId=${this.models.model.registerId}`, `engineeId=${this.models.model.engineeId}`, `engineeCode=${this.models.model.engineeCode}`, `status=${item.status}`, `pageAction=view`]
            this.$f7.view.current.router.navigate(`/business/qzjx/mobileEquipment/equip/beforeWork/list?${params.join('&')}`);
          }
        },
        // 巡检
        handlePatrol(item) {
          if (item.rightDesc == '待填写') {
            if (this.isSupOrg) {
              const params = [`registerId=${this.models.model.registerId}`, `engineeId=${this.models.model.engineeId}`, `action=processStart`, `appCode=mobileMachineryInspection`, `version=1`, `isDelay=false`]
              this.$f7.view.current.router.navigate(`/business/qzjx/mobileEquipment/equip/patrol/create?${params.join('&')}`);
            } else {
              this.$toast("您当前无法使用该功能，请联系监理单位登记巡检记录")
            }
          } else {
            const params = [`registerId=${this.models.model.registerId}`, `engineeId=${this.models.model.engineeId}`, `status=${item.status}`]
            this.$f7.view.current.router.navigate(`/business/qzjx/mobileEquipment/equip/patrol/list?${params.join('&')}`);
          }
        },
        // 维保
        handleMaintenancen(item) {
          if (item.rightDesc == '待填写') {
            if (this.isConOrg) {
              const params = [`registerId=${this.models.model.registerId}`, `engineeId=${this.models.model.engineeId}`]
              this.$f7.view.current.router.navigate(`/business/qzjx/mobileEquipment/equip/maint/create?${params.join('&')}`);
            } else {
              this.$toast("您当前无法使用该功能，请联系施工单位登记维保记录")
            }
          } else {
            const params = [`registerId=${this.models.model.registerId}`, `engineeId=${this.models.model.engineeId}`, `status=${item.status}`]
            this.$f7.view.current.router.navigate(`/business/qzjx/mobileEquipment/equip/maint/list?${params.join('&')}`);
          }
        },
        // 设备退场
        handleExit(item) {
          this.$f7.dialog.confirm("确认当前设备已经退场?", res => {
            if (res) {
              this.$f7.request.post('/app/equipment/eqmMobileExit/save', {
                model: {
                  registerId: this.models.model.registerId
                }
              }, (r) => {
                this.$f7.preloader.hide();
                r = JSON.parse(r);
                if (r && r.success) {
                  this.$f7.dialog.alert(r.message || '提交成功', () => {
                    this.$f7.views.current.router.back({ force: true })
                  });
                } else {
                  this.$toast(r.message || "退场失败");
                }
              }, (r) => {
                this.$f7.preloader.hide();
                this.$f7.dialog.alert(r.message || '退场失败');
              });
            }
          }, (err) => {
            console.log(err);
          })
        },
        getStep() {
          let num = 0
          if (this.nodeList.length > 0) {
            for (let i = 0; i < this.nodeList.length; i++) {
              const element = this.nodeList[i];
              if (element.status == 0) {// 未开始
                break
              } else if (element.status == 2) {//已完成
                this.activeStep = i + 1
              }
            }
          }
        },
      }
    };
  }
}
</script>

<style lang="less" scoped>
@import url('../../../../../assets/css/commonPage.less');

.content-box .right-box p span {
  color: #61677A;
}
.mr5{
  margin-right: 5px;
}
</style>
